import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../providers/article_provider.dart';
import '../config/app_theme.dart';

/// 资讯类型筛选组件
class ArticleTypeFilter extends StatelessWidget {
  const ArticleTypeFilter({super.key});

  static const List<Map<String, String>> typeList = [
    {'value': 'earnings_call', 'label': '业绩电话会'},
    {'value': 'official_blog', 'label': '官方播客'},
    {'value': 'interview', 'label': '高管访谈'},
    {'value': 'investment_review', 'label': '投资点评'},
  ];

  @override
  Widget build(BuildContext context) {
    return Consumer<ArticleProvider>(
      builder: (context, provider, child) {
        final selectedArticleType = provider.selectedArticleType;

        return Container(
          height: 50,
          decoration: const BoxDecoration(), // 透明背景，无边框
          child: ListView.builder(
            scrollDirection: Axis.horizontal,
            padding: const EdgeInsets.symmetric(horizontal: 16),
            itemCount: typeList.length,
            itemBuilder: (context, index) {
              final type = typeList[index];
              return _buildTypeItem(
                context,
                label: type['label']!,
                isSelected: selectedArticleType == type['value'],
                onTap: () {
                  provider.selectArticleType(type['value']);
                },
              );
            },
          ),
        );
      },
    );
  }

  Widget _buildTypeItem(
    BuildContext context, {
    required String label,
    required bool isSelected,
    required VoidCallback onTap,
  }) {
    return GestureDetector(
      onTap: onTap,
      child: Container(
        padding: const EdgeInsets.symmetric(horizontal: 12),
        margin: const EdgeInsets.only(right: 24),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              label,
              style: TextStyle(
                color: isSelected ? AppTheme.accentColor : AppTheme.textSecondary,
                fontSize: 14,
                fontWeight: isSelected ? FontWeight.w600 : FontWeight.normal,
              ),
            ),
            const SizedBox(height: 8),
            // 下划线
            AnimatedContainer(
              duration: const Duration(milliseconds: 300),
              width: isSelected ? 20 : 0,
              height: 3,
              decoration: BoxDecoration(
                color: AppTheme.accentColor,
                borderRadius: BorderRadius.circular(2),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

